<template>
<div class="arc-main">


  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeOutUpBig"
    leave-active-class="animated fadeOutDownBig"
  >

  <div v-show="showlog">
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input  placeholder="文章名查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input  placeholder="作者名查询"></el-input>
        </el-col>
        <el-col :span="3" style="margin-top: 0.1em">
          <el-button type="primary" size="small">查询</el-button>
          <el-button type="default" size="small">重置</el-button>
        </el-col>
      </el-row>

    </el-card>
    <el-card class="box-card1">
      <el-table
        :border="true"
        :data="arcList"
        style="width: 100%">
        <el-table-column
          prop="date"
          type="index"
          label="#"
          width="80px">
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="文章标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="author"
          align="center"

          label="作者"
          width="180">
        </el-table-column>
        <el-table-column
          prop="kindTitle"
          label="文章分类"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="kindTitle"
          label="颜色分类"
          align="center"
          width="180">
          <template slot-scope="scope" style="display:flex; margin: auto">
            <div class="dotcolor">
              <div class="item" :style="{backgroundColor:scope.row.color1}"></div>
              <div class="item" :style="{backgroundColor:scope.row.color2}"></div>
              <div class="item" :style="{backgroundColor:scope.row.color3}"></div>

            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="kindTitle"
          label="封面图片"
          align="center"
          width="180">
          <template slot-scope="scope">
            <img width="80%" :src="scope.row.coverImg" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="kindTitle"
          align="center"
          label="阅读/点赞"
          width="180">
          <template slot-scope="scope">
          <span>
             {{scope.row.viewCount}} / {{scope.row.zanCount}}
          </span>

          </template>
        </el-table-column>
        <el-table-column
          prop="kindTitle"
          label="更新时间"
          align="center"

          width="180">
          <template slot-scope="scope">
          <span>
            {{datecon(scope.row.addTime)}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="kindTitle"
          label="操作"
          align="center"
          fixed="right"
          width="250">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="default" @click="addNew">新增</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>

          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
  </transition>
<!--  编辑dialog-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDownBig"
    leave-active-class="animated fadeOutUpBig"
  >
    <edit-log ref="edits" v-show="!showlog" @closelog="edit"></edit-log>
  </transition>


</div>

</template>

<script>
import EditLog from "@/views/material/arc/EditLog";
import articleApi from "@/api/product/article";
export default {
name: "materialArc",
  components:{
    EditLog
  },
data(){
return{
arcList:[],
showlog:true
}

},
methods:{
getArcList(){
articleApi.getArticleList({
  start:1,
  limit:99,

})
 .then(res=>{
   console.log(res)
    this.arcList = res.data.list;
 })

},
edit(id){
  // 编辑
this.showlog = !this.showlog
  console.log(id)
window.localStorage.setItem('editId',id)
this.$refs.edits.EditPage()


},
  //新增
  addNew(){
    this.showlog = !this.showlog
  },
  //删除
  del(id){
  articleApi.DelArticle({
    id:id
  })
    .then(res=>{
      console.log(res)
      this.getArcList()
    })
  }
},
  computed:{
  datecon(val){
    return function (val){
      let number= new Date(val)
      let mou = number.getMonth()+1;
      let date = number.getDate();
      let hours = number.getHours();
      let minutes = number.getMinutes();
      return `${mou}月${date}日${hours}时${minutes}分`
    }
  }
  },
  created(){
  this.getArcList()
  }
}
</script>

<style lang="scss" scoped>
.arc-main{
.box-card{
  width: 96%;
  margin: 10px auto;

}
  .box-card1{
    width: 96%;
    margin: 10px auto;
    .dotcolor{
      display: flex;
      justify-content: center;
      .item{
        margin-right: 2px;
        width: 20px;
        height: 20px;
        border-radius: 100%;

      }
    }
  }
}
</style>
